<template>
  <div class="study-recommend">
    <div class="title">今日学习建议</div>
    <div class="content" v-html="value.slice(0, 220) + '...'"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(`
    <section>
        <ul>
            <li><strong>晨间专注（30min）</strong>：复习昨日核心知识点，用费曼技巧复述关键概念</li>
            <li><strong>主题学习（2h）</strong>：优先处理待办清单中标记为★的重要内容</li>
            <li><strong>实践环节（1h）</strong>：完成1个代码实战/实验项目（建议分段计时）</li>
            <li><strong>碎片时间</strong>：通过音频/闪卡记忆专业术语</li>
        </ul>
        <p><em>💡 小贴士：每学习50分钟休息5分钟，使用番茄钟法保持高效</em></p>
    </section>
`)
</script>

<style lang="scss" scoped>
.study-recommend {
  min-height: 150px;
  padding: 15px;
  background-color: rgba(209, 237, 255,0.5);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 0.1px solid #f3f4f5;
  box-shadow: 5px 5px 10px rgba(159, 216, 237, 0.343);

  .title {
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    font-weight: 500;
    font-family: '快乐体';
    color: #00abfa;
    letter-spacing: 5px;
  }

  .content {
    font-family: '爱点风雅黑';
  }
}
</style>